import React, { FC } from 'react';

import { useHeaderData } from '@libs/common/react-hooks/useHeaderData';
import { SimpleLink } from '@libs/dome-ui';
import { HeaderOption } from '@libs/server-side/types';
import { getPageUrl, PageAlias } from '@libs/common/router';

import { CommonHeader } from './CommonHeader';

interface CommonTmplProps {
    specialClassName: string;
}

const CommonTmpl: FC<CommonTmplProps> = (props) => {
    const headerData = useHeaderData<HeaderOption>();

    return (
        <>
            <CommonHeader
                logo={headerData.sloganLogo}
                menus={[
                    // {
                    //     name: 'Dome',
                    //     type: 'customize',
                    //     customizeFC: (
                    //         <img
                    //             src={headerData?.sloganLogo}
                    //             alt="Dome"
                    //             style={{ display: 'inline-block', backgroundColor: 'bisque', height: '100%' }}
                    //         />
                    //     ),
                    // },
                    {
                        name: '简历',
                        type: 'customize',
                        customizeFC: (
                            <SimpleLink
                                title="简历"
                                href={getPageUrl(PageAlias.ResumeTemplateList)}
                            >
                                简历
                            </SimpleLink>
                        ),
                    },
                    // { name: '工具', type: 'customize', customizeFC: <SimpleLink title="资讯" pageAlias={}/> },
                    // {
                    //     name: '新闻',
                    //     type: 'customize',
                    //     customizeFC: <p>asdasdasdad</p>,
                    // },
                ]}
            />
            <div
                className={`main font-modern${
                    props.specialClassName?.toString()?.trim()?.length > 0
                        ? ` ${props.specialClassName}`
                        : ''
                }`}
            >
                {props?.children}
            </div>
        </>
    );
};

CommonTmpl.displayName = 'CommonTmpl';

export { CommonTmpl, CommonTmplProps };
